Instituto Federal de São Paulo (IFSP)
Campus Bragança Paulista/SP

Análise e Desenvolvimento de Sistemas (ADS)

5o. módulo
Profa. Ana Paula Müller Giancoli
paulagiancoli@ifsp.edu.br


AULA 06 - TAGS HTML DE FORMULÁRIOS E SUAS RESPECTIVAS PROPRIEDADES CSS

Agenda

1. Apresentação Tags HTML de Formulários

1.1. Form

<form> 
   ...inserir suas tags de formulário aqui ...
</form>

1.2. Atributos do Formulário

1.2.1. Enviando dados de um Formulário

Figura representa a arquitetura

Fonte: (MDN Web Docs). Disponível em: MDN Web Docs. Acesso em: 14 jul. 2020.

1.3. Criando a Estrutura Básica do HTML

1.3.1. Fieldset e Legend

<fieldset>
    <legend> Legenda do Fieldset </legend>
    ....demais conteúdos ... 
</fieldset>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Tags de Formulários</title>
</head>
<body>
  <form method="post" action="" name="form1" >
     <fieldset>                                <!-- Adicionado -->
        <legend>Informações Pessoais</legend>  <!-- Adicionado -->
     </fieldset>                               <!-- Adicionado -->
  </form>
</body>
</html>

Saída:

<!-- Arquivo index.html -->
<!-- Estrutura do HTML mantida a mesma -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Tags de Formulários</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <form method="post" action="" name="form1" >
     <fieldset>                                <!-- Adicionado -->
        <legend>Informações Pessoais</legend>  <!-- Adicionado -->
     </fieldset>                               <!-- Adicionado -->
  </form>
</body>
</html>
/* Arquivo estilo.css */
/* Todos os elementos dentro do fieldset, receberão estas configurações */
/* Exceto se forem especificados individualmente após esta definição */
/* Caso a altura não seja definida, ele assumirá conforme o conteúdo do fieldset. */
fieldset {
  width: 600px;
  height: 200px;
  font-family: Tahoma;
  font-size: 22px;
  font-weight: bold;
  background-color: lightskyblue;
  border: 10px #af3333 solid;
}

/* A legenda será configurada conforme indicado */
legend {
  color: darkblue;              /* Cor do texto da legenda */
  background-color: #b9def0;    /* Cor de fundo da legenda */
  padding: 10px;
  border: 10px #af3333 solid;   /* Borda da legenda, modificando a espessura, cor, e tipo */
  border-radius: 2em;           /* Cantos arredondados da legenda */
}

Saída:

1.3.2. Label e Outline

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Tags de Formulários</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <form method="post" action="" name="form1" >
     <fieldset>                                 
        <legend>Informações Pessoais</legend>  
         <label for="">Rótulo</label>          <!-- Adicionado -->
     </fieldset>                                
  </form>
</body>
</html>
/* Arquivo estilo.css */
/* Todos os elementos dentro do fieldset, receberão estas configurações */
/* Exceto se forem especificados individualmente após esta definição */
/* Caso a altura não seja definida, ele assumirá conforme o conteúdo do fieldset. */
fieldset {
  width: 600px;
  height: 200px;
  font-family: Tahoma;
  font-size: 22px;
  font-weight: bold;
  background-color: lightskyblue;
  border: 10px #af3333 solid;
}

/* A legenda será configurada conforme indicado */
legend {
  color: darkblue;              /* Cor do texto da legenda */
  background-color: #b9def0;    /* Cor de fundo da legenda */
  padding: 10px;
  border: 10px #af3333 solid;   /* Borda da legenda, modificando a espessura, cor, e tipo */
  border-radius: 2em;           /* Cantos arredondados da legenda */
}

Saída:

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Tags de Formulários</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <form method="post" action="" name="form1" >
     <fieldset>
        <legend>Informações Pessoais</legend>
        <label for="nome">Rótulo</label>                  <!-- Adicionado -->
        <input type="text" id="nome" name="nomeusuario">  <!-- Adicionado -->
     </fieldset>
  </form>
</body>
</html>
/* Arquivo estilo.css  omitido para facilitar entendimento. Não foi modificado. */

Saída:

Outline

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior -->
<!-- Omitido para facilitar entendimento -->
/* Arquivo estilo.css */
/* Todos os elementos dentro do fieldset, receberão estas configurações */
/* Exceto se forem especificados individualmente após esta definição */
fieldset {
  width: 600px;
  height: 200px;
  font-family: Tahoma;
  font-size: 22px;
  font-weight: bold;
  background-color: lightskyblue;
  border: 10px #af3333 solid;
}

/* A legenda será configurada conforme indicado */
legend {
  color: darkblue;               
  background-color: #b9def0;    
  padding: 10px;
  border: 10px #af3333 solid;    
  border-radius: 2em;            
}

input {
  outline: darkred solid 5px;   /* Adicionado  para destacar o outline da caixa de texto */
}

Saída:

1.3.3 Input

name

type

require

<input type="text" id="nome" required>

Saída:

min e max

Saída:

Valor min definido Valor max definido

step

placeholder

Saída:

pattern

Saída:

readonly

<input type="text" id="nome" readonly>

Saída:

disabled

<input type="text" id="nome" disabled>

Saída:

size

<input type="text" id="nome" size="70">

Saída:

maxlength

<input type="text" id="nome" size="70" maxlength="30">

Saída:

multiple

<label for="nome">Nome</label>
    <select multiple id="nome">
      <option>Ana Paula</option>
      <option>Paula</option>
      <option>Ana</option>
      <option>Paula Ana</option>
      <option>Aninha</option>
    </select>

Saída:

autocomplete

<form method="post" action="" name="form1" autocomplete="on">

auto focus

<input type="text" id="nome" autofocus>

tabindex

<fieldset>
        <legend>Informações Pessoais</legend>
        <p>Selecione qualquer um dos itens:</p>
        <label for="um">Elemento inicial:</label>
        <input type="text" id="um">
        <div tabindex="0">Segundo elemento.</div>
        <div>Elemento não indexado com tab.</div>
        <label for="tres">Terceiro elemento:</label>
        <input type="text" id="tres">
     </fieldset>

Saída:

1.3.3.2. Tipos de Input (type)

Valores do tipo (type) < input > já existentes em versões anteriores:

Text

<fieldset>
       <legend> Texto </legend>
       <label for="texto">Type: text</label>
       <input type="text" id="texto"> 
    </fieldset>

Saída:

Password

<fieldset>
      <legend>Senha</legend>
      <label for="texto">Type: password</label>
      <input type="password" id="texto">
    </fieldset>

Saída:

Radio

<fieldset>
      <legend>Radio Button</legend>
      <label for="if1"> Institutos Federais </label>
      <div class="radio">
         <input type="radio" id="if1" name="ifs" checked>
         <label for="if1" class="linha">IFSP</label>
      </div>
      <div class="radio">
         <input type="radio" id="if2" name="ifs">
         <label for="if2" class="linha">IFF</label>
      </div>
      <div class="radio">
         <input type="radio" id="if3" name="ifs">
         <label for="if3"  class="linha">IFMG</label>
      </div>
      <div class="radio">
         <input type="radio" id="if4" name="ifs">
         <label for="if4"  class="linha">IF Sudeste de Minas</label>
      </div>
    </fieldset>

Saída:

Checkbox

<fieldset>
      <legend>Checkbox</legend>
      <div class="checkbox">
        <input type="checkbox" id="l1" name="ling1" checked tabindex="1">
        <label for="l1" class="linha">Python</label><br>
      </div>
      <div class="checkbox">
        <input type="checkbox" id="l2" name="ling2"  tabindex="2">
        <label for="l2"  class="linha">JAVA</label><br>
      </div>
      <div class="checkbox">
        <input type="checkbox" id="l3" name="ling3"  tabindex="3">
        <label for="l3"  class="linha">PHP</label><br>
      </div>
      <div class="checkbox">
        <input type="checkbox" id="l4" name="ling4"  tabindex="4" >
        <label for="l4" class="linha">C#</label><br>
      </div>
    </fieldset>

Saída:

Submit

<fieldset>
      <legend>Enviar o formulário</legend>
      <label for="texto">Type: submit</label><br>
      <input type="submit" id="texto">
    </fieldset>

Saída:

Reset

<fieldset>
      <legend>Limpar o formulário</legend>
      <label for="texto">Type: reset</label><br>
      <input type="reset" id="texto"> 
    </fieldset>

Saída:

File

<fieldset>
      <legend>Carregar arquivo</legend>
      <label for="texto">Type: file</label><br>
      <input type="file" id="texto"> 
    </fieldset>

Saída:

Hidden

<fieldset>
      <legend>Esconder</legend>
      <label for="texto">Type: hidden</label><br>
      <input type="hidden" id="texto"> 
    </fieldset>

Saída:

Image

<fieldset>
      <legend>Imagem</legend>
      <label for="texto">Type: image</label><br>
      <input type="image" id="texto" src="logoDWE.jpg"> 
    </fieldset>

Saída:

Button

<fieldset>
      <legend>Botão</legend>
      <label for="texto">Type: button</label><br>
      <input type="button" id="texto" value="Executar">
    </fieldset>

Saída:

Valores do tipo (type) < input > que surgiram com HTML5

Number

<fieldset>
      <legend>Número</legend>
      <label for="texto">Type: number</label><br>
      <input type="number" id="texto" value="1">
    </fieldset>

Saída:

Email

<fieldset>
      <legend>E-mail</legend>
      <label for="texto">Type: e-mail</label><br>
      <input type="email" id="texto" placeholder="xx.xx@ifsp.edu.br">
    </fieldset>

Saída:

<fieldset>
      <legend>Pesquisa</legend>
      <label for="texto">Type: search</label><br>
      <input type="search" id="texto">
    </fieldset>

Saída:

Tel

<fieldset>
      <legend>Telefone</legend>
      <label for="texto">Type: tel</label><br>
      <input type="tel" id="texto">
    </fieldset>

Saída:

Url

<fieldset>
      <legend>URL</legend>
      <label for="texto">Type: url</label><br>
      <input type="url" id="texto" placeholder="http://www.ifsp.edu.br">
    </fieldset>

Saída:

Range

<fieldset>
      <legend>Faixa</legend>
      <label for="texto">Type: range</label><br>
      <input type="range" id="texto" min="1" max="10" value="3">
    </fieldset>

Saída:

Color

<fieldset>
      <legend>Cor</legend>
      <label for="texto">Type: color</label><br>
      <input type="color" id="texto">
    </fieldset>

Saída:

Date

<fieldset>
      <legend>Data</legend>
      <label for="texto">Type: date</label><br>
      <input type="date" id="texto">
    </fieldset>

Saída:

Datatime-local

<fieldset>
      <legend>Data Local</legend>
      <label for="texto">Type: datetime</label><br>
      <input type="datetime-local" id="texto">
    </fieldset>

Saída:

Month

<fieldset>
      <legend>Mês</legend>
      <label for="texto">Type: month</label><br>
      <input type="month" id="texto">
    </fieldset>

Saída:

Time

<fieldset>
      <legend>Time</legend>
      <label for="texto">Type: time</label><br>
      <input type="time" id="texto">
    </fieldset>

Saída:

Week

<fieldset>
      <legend>Semana</legend>
      <label for="texto">Type: week</label><br>
      <input type="week" id="texto">
    </fieldset>

Saída:

1.1.3.4. Textarea

<fieldset>
      <legend> Textarea </legend>
      <label for="texto">Textarea</label><br>
      <textarea id="texto" wrap="soft">Digite aqui seu texto</textarea> 
    </fieldset>


    <fieldset>
      <legend> Textarea </legend>
      <label for="texto">Textarea</label><br>
      <textarea id="texto" wrap="hard" cols="20">Digite aqui seu texto</textarea>
    </fieldset>

Saída:

wrap: soft wrap: hard cols = 20

1.1.3.5. Select, Option, Optgroup

<fieldset>
      <legend>Seletores</legend>
      <div>
        <label for="cores">Cores</label>
        <select name="tabelaCores" id="cores">
          <option value="0">Selecione..</option>
          <option value="1">vermelho</option>
          <option value="2">verde</option>
          <option value="3">amarelo</option>
        </select><br>
      </div>
    </fieldset>

Saída:

<fieldset>
      <legend>Seletores</legend>
      <div>
        <label for="dias">Dias da Semana</label><br>
        <div>
          <select name="DiasSemana" multiple id="dias">
            <option value="Dom">Domingo</option>
            <option value="Seg">Segunda</option>
            <option value="Ter">Terça</option>
            <option value="Qua">Quarta</option>
            <option value="Qui">Quinta</option>
            <option value="Sex">Sexta</option>
            <option value="Sab">Sábado</option>
          </select><br>
        </div>
      </div>
    </fieldset>

Saída:

<fieldset>
      <legend>Seletores</legend>
      <div class="form-group">
        <label for="equip">Equipamentos</label>
        <select name="equipa" id="equip">
          <option>Selecione...</option>
          <optgroup label="Hardware">
            <option value="tec">Teclado</option>
            <option value="mou">Mouse</option>
          </optgroup>
          <optgroup label="Software">
            <option value="java">Java</option>
            <option value="c#">C#</option>
          </optgroup>
        </select>
      </div>
    </fieldset>

Saída:

1.1.3.6. Datalist, list

<fieldset>
      <legend>Listagem</legend>
      <div hidden>
        <datalist id="contactlist" class="form-control">
          <option value="anapaula@xx.com.br" label="Ana Paula">
          <option value="paula@xx.com.br" label="Paula">
          <option value="giancoli@xx.com.br" label="Giancoli">
        </datalist>
      </div>
      <div class="form-group">
        <label for="contato">Contato:</label>
        <input class="form-control" type="email" id="contato" list="contactlist">
      </div>
    </fieldset>

Saída:

1.1.3.7. Button

<fieldset>
      <legend>Botão Button</legend>
      <button type="button">Tipo button</button>
    </fieldset> 



    <fieldset>
      <legend>Botão Submit</legend>
      <button type="submit">Tipo submit</button>
    </fieldset>  



    <fieldset>
      <legend>Botão Reset</legend>
      <button type="reset">Tipo Reset</button>
    </fieldset>

Saída:

1.1.3.8. Output

<fieldset>
        <legend>Uso do Output</legend>
        <h2>Multiplicação</h2>
        <form oninput="output.value = parseInt(val1.valueAsNumber || 0) * parseInt(val2.valueAsNumber || 0)" id=foo>
          <input id=a type=number name=val1 tabindex="1"> x
          <input id=b type=number name=val2 tabindex="2"> =
          <output name=output for="val1 val2" form=foo>000</output>
        </form>



        <h2>Soma</h2>
        <form oninput="output.value = parseInt(val3.valueAsNumber || 0) + parseInt(val4.valueAsNumber || 0)" id=foo1>
          <input id=c type=number name=val3 tabindex="3"> +
          <input id=d type=number name=val4 tabindex="4"> =
          <output name=output for="val3 val4" form=foo1>000</output>
        </form>



        <h2>Subtração</h2>
        <form oninput="output.value = parseInt(val5.valueAsNumber || 0) - parseInt(val6.valueAsNumber || 0)" id=foo2>
          <input id=e type=number name=val5 tabindex="5"> -
          <input id=f type=number name=val6 tabindex="6"> =
          <output name=output for="val5 val6" form=foo2>000</output>
        </form>



        <h2>Divisão</h2>
        <form oninput="output.value = parseInt(val7.valueAsNumber || 0) / parseInt(val8.valueAsNumber || 0)" id=foo3>
          <input id=g type=number name=val7 tabindex="7"> /
          <input id=h type=number name=val8 tabindex="8"> =
          <output name=output for="val7 val8" form=foo3>000</output>
        </form>
    </fieldset>

Saída:

1.1.3.9. Meter

1.1.3.10. Progress

<fieldset>
         <legend>Exemplos Range, Meter, Progress</legend>
         <h4>Range</h4>
         <input type="range" id="texto" name="range" min="0"  max="100" step="1"><br><br>

         <h4>Meter</h4>
         <meter value="60" name="meter" min="0"  max="100" low="73"  high="87">D--</meter><br><br>

         <h4>Progress</h4>
         <progress value="80" name="prog" max="100"><span id=""complete">0</span>%</progress>
    </fieldset>

Saída:

Referências

Perguntas


ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.

</div> </div>